<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"系统人员编辑页"}){} %>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container layui-card">
      <div class="layui-card-body">
        <t-form ref="formRef" :data="form" :rules="rules" :disabled="loading" scroll-to-first-error="smooth" label-width="120px" colon requiredMark>
          <t-tabs v-model="tabIndex">
            <t-tab-panel :value="1" label="基本信息" :destroy-on-hide="false">
              <div class="py-40 pt-30 pb-20">

                <t-row :gutter="[50,20]">
                  <t-col :sm="6" :xs="12">
                    <t-form-item label="头像" name="avatar">
                      <t-image :src="form.avatar" class="pointer" :style="{ width: '140px', height: '140px' }" @click="uploadAvatar"/>
                    </t-form-item>
                  </t-col>
                  <t-col :sm="6" :xs="12">
                    <t-row :gutter="[50,20]">
                      <t-col :span="12">
                        <t-form-item label="人员名称" name="name">
                          <t-input v-model="form.name" placeholder="请输入人员名称" :maxlength="20" show-limit-number clearable></t-input>
                        </t-form-item>
                      </t-col>
                      <t-col :span="12">
                        <t-form-item label="性别" name="sex">
                          <t-radio-group v-model="form.sex">
                            <t-radio label="男" :value="1"></t-radio>
                            <t-radio label="女" :value="2"></t-radio>
                            <t-radio label="未知" :value="3"></t-radio>
                          </t-radio-group>
                        </t-form-item>
                      </t-col>
                      <t-col :span="12">
                        <t-form-item label="出生日期" name="birth">
                          <t-date-picker v-model="form.birth" placeholder="请选择出生日期" clearable></t-date-picker>
                        </t-form-item>
                      </t-col>
                    </t-row>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="手机" name="phone">
                      <t-input v-model="form.phone" placeholder="请输入手机" :maxlength="11" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="邮箱" name="email">
                      <t-input v-model="form.email" placeholder="请输入邮箱" :maxlength="50" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="员工编号" name="empNo">
                      <t-input v-model="form.empNo" placeholder="请输入员工编号" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="入职日期" name="entryDate">
                      <t-date-picker v-model="form.entryDate" enableTimePicker placeholder="请选择入职日期" clearable></t-date-picker>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="所在组织" name="orgId">
                      <t-tree-select v-model="form.orgId" :loading="orgOptions.loading" :data="orgOptions.data" placeholder="请选择所在组织" clearable
                                     @change="changeOrg"></t-tree-select>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="所在职位" name="positionId">
                      <t-select v-model="form.positionId" :loading="positionOptions.loading" placeholder="请选择所在职位" clearable @change="changePosition">
                        <t-option v-for="item in positionOptions.data" :key="item.id" :label="item.name" :value="item.id"></t-option>
                      </t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="状态" name="status">
                      <t-radio-group v-model="form.status">
                        <t-radio label="启用" :value="1"></t-radio>
                        <t-radio label="停用" :value="0"></t-radio>
                      </t-radio-group>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
            </t-tab-panel>
            <t-tab-panel :value="2" label="更多信息" :destroy-on-hide="false">
              <div class="py-40 pt-30 pb-20">
                <t-row :gutter="[50,20]">
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="民族" name="nation">
                      <t-select v-model="form.nation" :loading="nationOptions.loading" :options="nationOptions.data" placeholder="请选择民族" filterable clearable></t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="籍贯" name="nativePlace">
                      <t-input v-model="form.nativePlace" placeholder="请输入籍贯" :maxlength="255" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="家庭住址" name="homeAddress">
                      <t-input v-model="form.homeAddress" placeholder="请输入家庭住址" :maxlength="255" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="通信地址" name="mailingAddress">
                      <t-input v-model="form.mailingAddress" placeholder="请输入通信地址" :maxlength="255" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="证件类型" name="idCardType">
                      <t-select v-model="form.idCardType" :loading="idTypeOptions.loading" :options="idTypeOptions.data" placeholder="请选择证件类型" filterable
                                clearable></t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="证件号码" name="idCardNumber">
                      <t-input v-model="form.idCardNumber" placeholder="请输入证件号码" :maxlength="30" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="文化程度" name="cultureLevel">
                      <t-select v-model="form.cultureLevel" :loading="whcdOptions.loading" :options="whcdOptions.data" placeholder="请选择文化程度" filterable
                                clearable></t-select>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="政治面貌" name="politicalOutlook">
                      <t-input v-model="form.politicalOutlook" placeholder="请输入政治面貌" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="毕业院校" name="college">
                      <t-input v-model="form.college" placeholder="请输入毕业院校" :maxlength="35" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="学历" name="education">
                      <t-input v-model="form.education" placeholder="请输入学历" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="学制" name="eduLength">
                      <t-input v-model="form.eduLength" placeholder="请输入学制" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="学位" name="degree">
                      <t-input v-model="form.degree" placeholder="请输入学位" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="家庭电话" name="homeTel">
                      <t-input v-model="form.homeTel" placeholder="请输入家庭电话" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="办公电话" name="officeTel">
                      <t-input v-model="form.officeTel" placeholder="请输入办公电话" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="紧急联系人" name="emergencyContact">
                      <t-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="紧急联系人电话" name="emergencyPhone">
                      <t-input v-model="form.emergencyPhone" placeholder="请输入紧急联系人电话" :maxlength="15" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :xs="12" :sm="6">
                    <t-form-item label="紧急联系人地址" name="emergencyAddress">
                      <t-input v-model="form.emergencyAddress" placeholder="请输入紧急联系人地址" :maxlength="255" show-limit-number clearable></t-input>
                    </t-form-item>
                  </t-col>
                  <t-col :span="12">
                    <t-form-item label="备注" name="remake">
                      <t-textarea v-model="form.remake" placeholder="请输入备注" :maxlength="255" show-limit-number clearable></t-textarea>
                    </t-form-item>
                  </t-col>
                </t-row>
              </div>
            </t-tab-panel>
          </t-tabs>
       </t-form>
      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container ">
      <t-button :loading="loading" theme="primary" @click="onSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "sys/person/";
  const ORG_URL = "sys/org/";
  const POSITION_URL = "sys/position/";
</script>

<script>

  let admin;
  layui.use(['admin'], function () {
    admin = layui.admin;
  })
  setupVue("#app", {
    setup() {
      // 表单相关
      const loading = Vue.ref(false);
      const formRef = Vue.ref(null);
      const form = Vue.ref({
        name: null,
        sex: 1,
        age: null,
        birth: undefined,
        nation: null,
        nativePlace: null,
        homeAddress: null,
        mailingAddress: null,
        idCardType: null,
        idCardNumber: null,
        cultureLevel: null,
        politicalOutlook: null,
        college: null,
        education: null,
        eduLength: null,
        degree: null,
        phone: null,
        email: null,
        homeTel: null,
        officeTel: null,
        emergencyContact: null,
        emergencyPhone: null,
        emergencyAddress: null,
        empNo: null,
        entryDate: undefined,
        orgId: null,
        positionId: null,
        positionLevel: null,
        remake: null,
        status: 1,
      });
      const rules = {
        name: [$required('请输入人员名称')],
        sex: [$required('请选择性别')],
        status: [$required('请选择状态')],
        orgId: [$required('请选择组织')],
        positionId: [$required('请选择职位')],
        phone: [$existRules('请输入正确的手机号', 'phone')],
        emergencyPhone: [$existRules('请输入正确的手机号', 'phone')],
        idCardNumber: [$existRules('请输入正确的身份证号', 'idCard')],
        email: [$existRules('请输入正确的邮箱', 'email')],
        homeTel: [$existRules('请输入正确的联系方式', 'phoneOrMobile')],
        officeTel: [$existRules('请输入正确的联系方式', 'phoneOrMobile')],
      };
      // 获取表单数据
      const getForm = (id) => req(axiosGet, PATH_URL + "getInfo", { id }, (res) => {
        if (res.code === 200) {
          form.value = res.data;
          fetchPosition(form.value.orgId)
        } else {
          $baseAlert(res.msg, () => closeBtn.value.close());
        }
      }, loading);
      const LyData = getLayerData();
      if (LyData && LyData.id) getForm(LyData.id);
      else {

      }


      // 点击保存
      const onSave = () => {
        formRef.value.validate().then((validateResult) => {
          if (validateResult && Object.keys(validateResult).length) {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            $baseMsg(firstError);
          } else {
            let REQ;
            let URL;
            if (form.value.id) {
              REQ = axiosPut, URL = PATH_URL + "update";
            } else {
              REQ = axiosPost, URL = PATH_URL + "add";
            }
            req(REQ, URL, form, (res) => {
              $baseAlert(res.msg, () => {
                if (res.code === 200) closeLayer(parent.reloadData);
              })
            }, loading);
          }
        });
      }

      // 标签
      const tabIndex = Vue.ref(1);

      // 上级组织选项
      const orgOptions = useOptions();
      getSuperior(ORG_URL + "treeOption", { columnField: "id,pid,name" }, orgOptions, true);
      // 选择组织
      const changeOrg = (value, { node }) => {
        form.value.orgName = node.label;
        form.value.positionId = null;
        form.value.positionName = '';
        if (value) {
          fetchPosition(value);
        } else {
          positionOptions.data = [];
        }
      }

      // 选择头像
      const uploadAvatar = () => {
        admin.cropImg({
          imgSrc: form.value.avatar,
          onCrop: function (res) {
            //文件上传
            const file = base64toFile(res, 'avatar.png');
            const formData = new FormData();
            formData.append("file", file);
            formData.append("baseDir", "sysUser");
            formData.append("dir", "avatar");
            uploadFile(formData).then(res => {
              if (res.code === 200) {
                form.value.avatar = res.data.url;
                console.log(form.value.avatar);
              } else {
                $baseAlert(res.msg);
              }
            });
          },
        });
      }

      // 职位选择
      const positionOptions = useOptions();
      const fetchPosition = (orgId) => {
        req(axiosGet, POSITION_URL + "list", { columnField: "id,name,type", status: 1, orgId }, (res) => {
          if (res.code === 200) positionOptions.data = res.data;
        }, positionOptions.loading);
      }
      // 选择职位
      const changePosition = (value, { node }) => form.value.positionName = node?.label;

      // 民族
      const nationOptions = useOptions();
      dictOptions({ columnField: "label,value", status: "1", codeLike: "minzu_" }, nationOptions);

      // 证件类型
      const idTypeOptions = useOptions();
      dictOptions({ columnField: "label,value", status: "1", codeLike: "idType_" }, idTypeOptions);

      // 文化程度
      const whcdOptions = useOptions();
      dictOptions({ columnField: "label,value", status: "1", codeLike: "whcd_" }, whcdOptions);

      const closeBtn = useCloseBtn();
      return {
        closeBtn,
        formRef, loading, form, rules,
        onSave, uploadAvatar,
        tabIndex,
        orgOptions, changeOrg,
        positionOptions, changePosition,
        nationOptions, idTypeOptions, whcdOptions,
      }

    },
  });
</script>


</body>
</html>
